<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="Application">
      <my-alert @myclick="myFunc" title="按钮1"></my-alert>
      <my-alert @myclick="myFunc" title="按钮2"></my-alert>
    </div>

    <script>
      const { createApp, ref } = Vue;
      const App = createApp({
        setup() {
          const myFunc = (params) => {
            alert("父组件中的方法: " + params);
          };
          return { myFunc };
        },
      });
      const alertComponent = {
        props: ["title"],
        // setup(props) {
        //   const msg = "警告框提示";
        //   const count = ref(0);
        //   const click = () => {
        //     alert(props.title + msg + count.value++);
        //   };
        //   return { msg, count, click };
        // },
        emits: ['myclick'],
        setup(props, ctx) {
          const innerClick = () => {
            console.log('组件内部的逻辑')
            ctx.emit('myclick', props.title)
          }
          return { innerClick }
        },
        template: `<div><button @click="innerClick">{{ title }}</button></div>`,
      };
      App.component("my-alert", alertComponent);
      App.mount("#Application");
    </script>
  </body>
</html>
